<template>
  <div class="newProject">
    <nav_bar title='钢材识别' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="itemList">
      <div class="item">
        <div class="item_name">项目名称</div>
        <input type="text" placeholder="输入项目名称" v-model="project_name">     
      </div>
      <div class="item">
        <div class="item_name">地理位置</div>
        <div class="address" v-if="address" @click="getAddress">{{address}}</div>
        <div @click="getAddress" class="placeholder" v-else>选择地理位置</div>
      </div>
      <div class="item">
        <div class="item_name">收货方式</div>
        <picker
          @change="receiptType"
          :value="receiptType_index"
          :range="receiptType_data"
        >
          <div class="receiptType_content">
            <div>{{receiptType_input}}</div>
            <span>></span>
          </div>

        </picker> 
      </div>
      <div class="item">
        <div class="item_name">所属公司</div>
        <picker
          @change="selectCompany"
          :value="companyData"
          :range="companyArr"
          range-key="company_name"
        >
          <div class="receiptType_content">
            <div>{{companyData_input}}</div>
            <span>></span>
          </div>

        </picker> 
      </div>
      <div class="desc">
        <div class="item_name" >项目描述</div>
        <textarea v-model="project_desc"></textarea>
      </div>
      <div class="btn">
        <form name='pushMsgFm' report-submit @submit='commit' class="tepForm"  v-if="project_id">   
            <button form-type="submit"  class="btn_commit">
                保存项目
            </button>  
        </form>
        <form name='pushMsgFm' report-submit @submit='bind_company &&commit($event)' class="tepForm"  v-else>   
            <button form-type="submit"  class="btn_commit" :class="{'btn_commit_disabled':bind_company==false}">
                新建项目
            </button>  
            <div class="tip" v-if="bind_company==false">未绑定企业或公司，不能新建项目，请联系管理员</div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  data() {
    return {
      project_id:'',
      project_item:'',
      project_name:'',
      project_desc:'',
      receiptType_data: ['理计', '磅计'],
      receiptType_index:[0],
      receiptType_input:'',
      address:'',//地理位置
      lng:'',//经度
      lat:'',//纬度
      companyArr:'',
      companyData_index:'',
      companyData:'',
      companyData_input:'',
      companyData_input_id:'',//公司id
      bind_company:false//已有绑定的公司

    }
  },
  watch: {
    projectDetail(nval){
      if(nval){
      this.project_name=nval.name;
      this.project_desc=nval.desc;
      this.receiptType_input=nval.receipt_way;
      this.statusType_input=nval.status;
      this.project_id=nval.id;

      this.address=nval.address;
      this.lat=nval.latitude;
      this.lng=nval.longitude;

      this.companyData_input=nval.company_name;
      this.companyData_input_id=nval.company_id;//公司id
    }
    }
  },
  computed: {
    ...mapState({
      projectDetail:state=> state.modulesProject.projectDetail
    })
  },
  methods: {
    handlerGobackClick(){
      wx.navigateBack({
        delta: 1
      })
    },
    receiptType(e){
      this.receiptType_index=e.target.value
      this.receiptType_input=this.receiptType_data[this.receiptType_index]

    },
    statusType(e){
      this.statusType_index=e.target.value
      this.statusType_input=this.statusType_data[this.statusType_index]
    },
    selectCompany(e){
      this.companyData_index=e.target.value;
      this.companyData_input=this.companyArr[this.companyData_index].company_name;
      this.companyData_input_id=this.companyArr[this.companyData_index].company_id;
    },
    getAddress(){
      //获取地理位置
      const that=this
      wx.chooseLocation({
        success:function(res){
          that.address=res.address;
          that.lat=res.latitude;
          that.lng=res.longitude;
        }
      })
    },
    async getCompany(){
      //获取公司信息
      const userToken=wx.getStorageSync('userToken')
      const res=await this.$request.getData('/ucenter/getMyCompany',{
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.companyArr=res.data.data;
        if(res.data.data.length==0){
          this.bind_company=false
        }else{
          this.bind_company=true
        }
      }else{
        this.bind_company=false;
        this.$currency.showToast(res.data.message)
      }
    },
    async commit(e){
      var receiptType=''
      if(this.receiptType_input=='理计'){
        var receipt_way='rational'
      }else if(this.receiptType_input=='磅计'){
        var receipt_way='pound_meter'
      }

      const userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/ucenter/buildProject',{
        user_token:userToken,
        name:this.project_name,
        desc:this.project_desc,
        address:this.address,
        company_id:this.companyData_input_id,
        Lng:this.lng,
        Lat:this.lat,
        receipt_way,
        id:this.project_id,
        form_id:e.target.formId
      })
      if(res.data.level=='success'){
        this.$currency.showToast(res.data.message)
        setTimeout(async()=>{
          wx.switchTab({url:'/pages/home/main'})
        },1500)
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    initData(){
      this.project_id='';
      this.project_item='';
      this.project_name='';
      this.project_desc='';
      this.receiptType_data= ['理计', '磅计'];
      this.receiptType_index=[0];
      this.receiptType_input='';
      this.address='';
      this.companyArr='';
      this.companyData_index='';
      this.companyData='';
      this.companyData_input='';
      this.companyData_input_id='';
      this.lng='';
      this.lat='';
      this.bind_company=false
    }

  },
  onLoad(options){
    if(!options.id){
      this.initData()
    }
    this.getCompany();
  }

}
</script>
<style lang="scss" scoped>
  .newProject{

    width: calc(100% - 40px);
    margin-left: 20px;
    font-size: 16px;
  }
  .item{
    display: flex;
    align-items: center;
    padding:20px 0;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #eee;
    .item_name{
      width: 100px;
    }
    .placeholder{
        margin-left:20px;
        color: gray;
      }
    & input{
      margin-left:20px;
    }
  }
  .desc{
    margin-top:10px;
  }
  textarea{
    margin-top:10px;
    border:1px solid #eee;
    width:100%
  }
  .receiptType_content,.statusType_content{
    margin-left: 20px;
    width:230px;
    height:20px;
    display:flex;
    justify-content: space-between;
  }
  .address{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    width:200px;
  }
  .upLoadImg{
    img{
      margin-left: 20px;
      width: 80px;
      height: 80px;
    }
  }

  .btn{
    margin-top:30px;
    margin-bottom: 30px;
    display: flex; 
    justify-content: space-around;
  }
  .btn_commit{
    width: 180px;
    height: 45px;
    line-height: 45px;
    color:#fff;
    text-align: center;
    border-radius: 10px;
    background: #23b6ac;
  }
  .btn_commit_disabled{
    background: gray;
  }
  .tip{
    margin-top:5px;
    font-size: 14px
  }

</style>

